<template>
	<div class="list-page">
		<tool-bar nav="" title="集群">
			<el-button  @click="get_pom_text()">查看微服务 多集群Pom文件</el-button>

			<el-button @click="$data.fan_decode_dlg=true">解码Shell乱码</el-button>
			<el-button @click="add_click()">添加</el-button>
		</tool-bar>

		<el-dialog v-model="$data.pop_dlg" title="多集群Pom文件" width="80vw">
				<textarea v-html="$data.pom_text" style="width:100%;height:70vh;font-size:10px;font-min-size: 10px;"></textarea>
		</el-dialog>
		<my-list
			ref="list"
			url="/dev/cluster-info/list"
			@param="preload"
			@loaded="procData"
			:page-size="10"
			:store="true"
			:query="$data.query"
            delete-url="/dev/cluster-info/delete/{id}"
		>


			<el-table-column label="访问端口号" align="center">
				<template v-slot="scope">
					<el-tag>{{ scope.row.index + 800 }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="编码" prop="code"></el-table-column>
			<el-table-column label="名称" align="center">
				<template v-slot="scope">
					<div class="link" @click="edit_click(scope.row)">{{ scope.row.name }}</div>
				</template>
			</el-table-column>

			<template #query="scope">
				<kv label="名称">
					<el-input v-model="scope.query.name"></el-input>
				</kv>
			</template>
		</my-list>

		<el-dialog v-model="$data.fan_decode_dlg" title="解码" width="60%">
			<kv label="反斜线数字序列">
				<el-input v-model="$data.fan.input" type="textarea"></el-input>
			</kv>
			<kv>
				<el-button @click="fan_click()" title="每个部分转为8进制再转16进制， 前面加 百分号 ， 用  decodeURIComponent" type="primary"
				           style="margin:auto;">解Shell乱码!
				</el-button>
        <el-button @click="fan2_click()" title="每个部分去掉u前面加 百分号 ， 用  decodeURIComponent" type="primary"
                   style="margin:auto;">解\u乱码!
        </el-button>
			</kv>

			<kv label="结果">
				<el-input v-model="$data.fan.result" type="textarea"></el-input>
			</kv>
		</el-dialog>


	</div>
</template>
<style scoped lang="scss">
</style>
<script setup>
/**
 * Created by CodeGenerator at 2022-06-09 16:48:08
 */


//定义 vue2的this,当前组件
const $self = getCurrentInstance();



//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);


//定义data
const $data = reactive({
    //默认查询条件,默认存储
    query: {},
    fan_decode_dlg: false,
    pop_dlg: false,
    fan: {result: ""},
    pom_text: ``
})


const fan_click  = function () {
    if (!$data.fan.input) {
        return;
    }
    var v = $data.fan.input.slice(1)
        .split("\\")
        .filter(it => it)
        .map(it => parseInt(it, 8).toString(16))
        .map(it => "%" + it)
        .join("");
    $data.fan.result = decodeURIComponent(v);
}

const fan2_click  = function () {
  if (!$data.fan.input) {
    return;
  }
  var v = $data.fan.input.slice(1)
      .split("\\")
      .filter(it => it)
      .map(it=>"%" + it.slice(1))
      .join("");
  $data.fan.result = decodeURIComponent(v);
}

const get_pom_text = function () {
    $data.pop_dlg = true;
    jv.$http.get(jv.getFullUrl("mvn-p-profile.xml")).then(res => {
        $data.pom_text = res.data;
    })
}
//处理请求参数
const preload = function (param) {
    //保存查询条件

    //添加查询参数，修改分页参数等。
    //param.type = jv.$route.params.type
}

//处理列表的数据
const procData = function (res) {
    res.data.data.forEach(it => {
        //如果是组合实体，设置 it.id=...
    });
}

const add_click = function () {
    jv.$router.push("/dev/cluster-info/add")
}

const edit_click = function (row) {
    //记录上次点击行
    var rowId = row.id;

    jv.$router.push("/dev/cluster-info/edit/" + rowId)
}
</script>